<template>
  <div class="main">
    <div class="location">
      <div>
        <img class="loc" :src="BlueLocation" alt>
      </div>
      <AddressMid :address="address"/>
    </div>

    <div class="time" v-if="type != 'return'">
      <div>
        <span>配送时间</span>
      </div>
      <div class="select-time" @click="handleClick">
        <span>{{timeFormat}}</span>
        <img :src="IconRight" alt srcset>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../api/common'
import BlueLocation from "../../assets/common/blue-location.png";
import IconRight from "../../assets/common/icon-right.png";
import AddressMid from "@/components/address/AddressMid";
export default {
  props: ["address", "time"],
  components: {
    AddressMid
  },
  data() {
    return {
      BlueLocation,
      IconRight,
      selectTime: this.time,
      type: common.getParam('type')
    };
  },
  watch: {
    time(newVal, objVal) {
      this.selectTime = newVal;
    }
  },
  computed: {
    timeFormat() {
      if (this.selectTime) {
        return this.selectTime
      } else {
        return `立即送出`;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('showTimesele')
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  .location {
    display: flex;
    align-items: center;
    padding: 4vw 2vw;
    margin: 0 2vw;
    border-bottom: 1px solid #f9f9f9;
  }

  .loc {
    width: 6vw;
    height: 6vw;
    margin-right: 5vw;
  }

  .time {
    padding: 2vw 4vw;
    font-size: 3.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .select-time {
      display: flex;
      align-items: center;
      color: #008fef;
      img {
        width: 6vw;
        height: 6vw;
      }
    }
  }
}
</style>